<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MARRIAGE</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/axios-0.18.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<style>
    .el-header, .el-footer {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        line-height: 800px;
        padding-top: 50px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>


<body>

<div id="app">
    <el-container>
        <el-header style="background-color: #111111;color: white;position: relative;">
            <a th:href="@{/users/toIndex}" style="color: white;text-decoration: none;position: absolute;left: 20px;"><i class="el-icon-arrow-left"></i>暂不完善</a>
            完善个人信息
        </el-header>
        <el-container>
            <el-aside width="250px">
            </el-aside>
            <el-main text-align="center">
                <el-form ref="userInfo" :model="userInfo"  label-width="120px" :rules="rules">
                    <el-form-item label="基础信息">
                    </el-form-item>
                    <el-form-item label="昵称" prop="userName">
                        <el-input v-model="userInfo.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="realName">
                        <el-input v-model="userInfo.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="userSex">
                        <el-select v-model="userInfo.userSex" placeholder="请选择性别">
                            <el-option label="男" value="1"></el-option>
                            <el-option label="女" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生日" prop="userBirthday">
                        <el-date-picker
                                v-model="userInfo.userBirthday"
                                type="date"
                                placeholder="出生日期"
                                :picker-options="pickerOptions"
                                @blur="birthday()">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="年龄" prop="userAge">
                        <el-input v-model="userInfo.userAge" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="星座">
                        <el-input v-model="userInfo.userConstellation" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="学历">
                        <el-select v-model="userInfo.userEducation" placeholder="请选择学历">
                            <el-option label="博士" value="博士"></el-option>
                            <el-option label="研究生" value="研究生"></el-option>
                            <el-option label="本科" value="本科"></el-option>
                            <el-option label="大专" value="大专"></el-option>
                            <el-option label="中专" value="中专"></el-option>
                            <el-option label="高中" value="高中"></el-option>
                            <el-option label="初中" value="初中"></el-option>
                            <el-option label="小学" value="小学"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工作" prop="userJob">
                        <el-input v-model="userInfo.userJob"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码" prop="userPhone">
                        <el-input v-model="userInfo.userPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="userMail">
                        <el-input v-model="userInfo.userMail"></el-input>
                    </el-form-item>
                    <el-form-item label="工资(单位：元)" prop="userSalary">
                        <el-input v-model="userInfo.userSalary"></el-input>
                    </el-form-item>
                    <el-form-item label="婚姻状态" prop="userMaritalStatus">
                        <el-select v-model="userInfo.userMaritalStatus" placeholder="婚姻状态">
                            <el-option label="未婚" value="未婚"></el-option>
                            <el-option label="已婚" value="已婚"></el-option>
                            <el-option label="离异" value="离异"></el-option>
                            <el-option label="丧偶" value="丧偶"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="身高(单位CM)" prop="userHeight">
                        <el-input v-model="userInfo.userHeight"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="userAddress">
                        <el-input v-model="userInfo.userAddress"></el-input>
                    </el-form-item>

                    <el-form-item label="密保问题">
                    </el-form-item>

                    <el-form-item label="喜欢的数字"  prop="userProblem1">
                        <el-input v-model="userInfo.userProblem1" placeholder="100以内"></el-input>
                    </el-form-item>
                    <el-form-item label="喜欢的诗人" prop="userProblem2">
                        <el-input v-model="userInfo.userProblem2"></el-input>
                    </el-form-item>
                    <el-form-item label="喜欢的菜" prop="userProblem3">
                        <el-input v-model="userInfo.userProblem3"></el-input>
                    </el-form-item>

                    <el-form-item label="爱好">
                    </el-form-item>

                    <el-form-item label="喜欢的菜" prop="hobbyDish">
                        <el-input v-model="hobby.hobbyDish"></el-input>
                    </el-form-item>
                    <el-form-item label="喜欢的歌" prop="hobbySong">
                        <el-input v-model="hobby.hobbySong"></el-input>
                    </el-form-item>
                    <el-form-item label="喜欢的书" prop="hobbyBook">
                        <el-input v-model="hobby.hobbyBook"></el-input>
                    </el-form-item>
                    <el-form-item label="喜欢的运动" prop="hobbySports">
                        <el-input v-model="hobby.hobbySports"></el-input>
                    </el-form-item>
                    <el-form-item label="喜欢的一句话" prop="hobbyFamousQuote">
                        <el-input v-model="hobby.hobbyFamousQuote"></el-input>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                        <el-button @click="chongzhi()">重置</el-button>
                    </el-form-item>
                </el-form>

            </el-main>
            <el-aside width="250px">
            </el-aside>
        </el-container>
        <el-footer style="background-color:#202329 ;color: white;"><!--系统公司信息-->
            <p style="margin-bottom: 20px" >© 2022 Match Marriage All rights reserved | Design by
                <a href="https://blog.csdn.net/qq_45839699?type=sub&subType=watch" style="color: white"> ZJ.</a>
            </p>
        </el-footer>
    </el-container>
</div>

</body>
<script>
    var userId=[[${session.userInfo.userId}]]
    new Vue({
        el: "#app",
        data(){
            return {
                userInfo: {
                    userId:userId,
                    userName:[],
                    realName:[],
                    userSex:[],
                    userBirthday:null,
                    userAge:[],
                    userConstellation:[],
                    userEducation:[],
                    userJob:[],
                    userPhone:[],
                    userMail:[],
                    userSalary:[],
                    userMaritalStatus:[],
                    userHeight:[],
                    userAddress:[],
                    userProblem1:[],
                    userProblem2:[],
                    userProblem3:[],
                },
                hobby: {
                    hobbyUser:[],
                    hobbyDish:[],
                    hobbySong:[],
                    hobbyBook:[],
                    hobbySports:[],
                    hobbyFamousQuote:[],
                },
                dialogFormVisible: false,
                form:[],
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                rules: {
                    userName: [
                        { required: true, message: '请填写昵称', trigger: 'blur' }
                    ],
                    realName: [
                        { required: true, message: '请填写真实姓名', trigger: 'blur' }
                    ],
                    userSex: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    userBirthday: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    userEducation: [
                        { required: true, message: '请选择学历', trigger: 'change' }
                    ],
                    userJob: [
                        { required: true, message: '请选择工作', trigger: 'blur' }
                    ],
                    userPhone: [
                        { required: true, message: '请选择电话', trigger: 'blur' },
                        { min: 11, max: 11, message: '长度在11个字符', trigger: 'blur' }
                    ],
                    userMail: [
                        { required: true, message: '请填写邮箱', trigger: 'blur' }
                    ],
                    userSalary: [
                        { required: true, message: '请填写工资', trigger: 'blur' }
                    ],
                    userMaritalStatus: [
                        { required: true, message: '请选择婚姻状态', trigger: 'change' }
                    ],
                    userHeight: [
                        { required: true, message: '请填写身高', trigger: 'blur' }
                    ],
                    userAddress: [
                        { required: true, message: '请填写地址', trigger: 'blur' }
                    ],
                    userProblem1: [
                        { required: true, message: '请填写回答', trigger: 'blur' }
                    ],
                    userProblem2: [
                        { required: true, message: '请填写回答', trigger: 'blur' }
                    ],
                    userProblem3: [
                        { required: true, message: '请填写回答', trigger: 'blur' }
                    ],
                    hobbyDish: [
                        { required: true, message: '请填写回答', trigger: 'blur' }
                    ],
                    hobbySong: [
                        { required: true, message: '请填写回答', trigger: 'blur' }
                    ],
                    hobbyBook: [
                        { required: true, message: '请填写回答', trigger: 'blur' }
                    ],
                    hobbySports: [
                        { required: true, message: '请填写回答', trigger: 'blur' }
                    ],
                    hobbyFamousQuote: [
                        { required: true, message: '请填写回答', trigger: 'blur' }
                    ],

                },
            }
        },
        mounted(){


        },
        methods: {
            chongzhi(){
                location.reload();
            },
            onSubmit() {
                var _this=this;
                var date= timestampToTime(this.userInfo.userBirthday);
                axios({
                    headers:{'Content-Type':'application/json;charset=utf8'},
                    method:"post",
                    url:"setDate",
                    data:date
                }).then(function(response) {
                });
                _this.userInfo.userBirthday=null;
                axios({
                    headers:{'Content-Type':'application/json;charset=utf8'},
                    method:"post",
                    url:"updateUserById",
                    data:this.userInfo
                }).then(function(response) {
                });
                _this.hobby.hobbyUser=userId;
                axios({
                    headers:{'Content-Type':'application/json;charset=utf8'},
                    method:"post",
                    url:"/friends/addHobby",
                    data:this.hobby
                }).then(function(response) {
                });
                window.location.href="toIndex"
            },
            birthday(){
                var _this = this;
                var birthday=timestampToTime(this.userInfo.userBirthday);

                let birthdays = new Date(birthday.replace(/-/g, "/"));
                let d = new Date();
                let age =
                    d.getFullYear() -
                    birthdays.getFullYear() -
                    (d.getMonth() < birthdays.getMonth() ||
                    (d.getMonth() == birthdays.getMonth() &&
                        d.getDate() < birthdays.getDate())
                        ? 1
                        : 0);
                _this.userInfo.userAge=age;
                var month = birthdays.getMonth()+1;
                var date = birthdays.getDate();
                var con = getxingzuo(birthdays.getMonth() + 1, birthdays.getDate());
                _this.userInfo.userConstellation = con;
            },


        }

    })
    function timestampToTime(timestamp) {
        var date = new Date(timestamp );//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
        var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
        return Y+M+D;
    };

    function getxingzuo(month, day) {

        var d = new Date(1999, month - 1, day, 0, 0, 0);

        var arr = [];

        arr.push(["魔羯座", new Date(1999, 0, 1, 0, 0, 0)])

        arr.push(["水瓶座", new Date(1999, 0, 21, 0, 0, 0)])

        arr.push(["双鱼座", new Date(1999, 1, 20, 0, 0, 0)])

        arr.push(["白羊座", new Date(1999, 2, 21, 0, 0, 0)])

        arr.push(["金牛座", new Date(1999, 3, 21, 0, 0, 0)])

        arr.push(["双子座", new Date(1999, 4, 22, 0, 0, 0)])

        arr.push(["巨蟹座", new Date(1999, 5, 22, 0, 0, 0)])

        arr.push(["狮子座", new Date(1999, 6, 23, 0, 0, 0)])

        arr.push(["处女座", new Date(1999, 7, 24, 0, 0, 0)])

        arr.push(["天秤座", new Date(1999, 8, 24, 0, 0, 0)])

        arr.push(["天蝎座", new Date(1999, 9, 24, 0, 0, 0)])

        arr.push(["射手座", new Date(1999, 10, 23, 0, 0, 0)])

        arr.push(["魔羯座", new Date(1999, 11, 22, 0, 0, 0)])

        for (var i = arr.length - 1; i >= 0; i--) {

            if (d >= arr[i][1]) return arr[i][0];

        }

    }
</script>
</html>
